﻿    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>职称设置</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.min.js"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
        <script src="https://unpkg.com/element-plus/dist/index.full.min.js"></script>
        <style>
            /* 可以添加一些自定义样式 */
            .page-container {
                margin-top: 20px;
                display: flex;
                justify-content: center;
            }

        body {
            background-color: #FFFFCC;
        }
        </style>
    </head>
    <body>
        <div id="app">

            <div>您正在做的业务是：人力资源--招聘管理--职位发布管理--职位发布变更</div>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="major_name" label="职位名称" width="180"></el-table-column>
                <el-table-column prop="second_kind_name" label="公司名称" width="180"></el-table-column>
                <el-table-column prop="human_amount" label="招聘人数"></el-table-column>
                <el-table-column prop="register" label="发布时间"></el-table-column>
                <el-table-column prop="deadline" label="截至时间"></el-table-column>
                <el-table-column prop="mre_id" label="操作">
                    <template #default="scope">
                        <el-button size="small" type="primary" v-on:click="() => goToUpdatePage(scope.row.mre_id)">修改</el-button>
                    <el-button size="small" type="primary" v-on:click="() => confirmDelete(scope.row.mre_id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 添加分页组件 -->
            <div class="page-container">
                <el-pagination v-on:size-change ="handleSizeChange"
                v-on:current-change ="handleCurrentChange"
                               :current-page="currentPage"
                               :page-sizes="[4, 8, 12, 20]"
                               :page-size="pageSize"
                               layout="total, sizes, prev, pager, next, jumper"
                               :total="total">
                </el-pagination>
            </div>
        </div>
        <script>
            const { createApp, ref, onMounted } = Vue;

            const app = createApp({
              setup() {

                  const tableData = ref([]); // 修正变量名拼写错误
                  const pageSize = ref(4);
                  const currentPage = ref(1); // 初始页码应为1
                  const total = ref(0); // 总记录数

                  function fill() {
                      // 将分页参数添加到URL查询字符串中
                      axios.get("/EMR_SUD/Select_EMR", {
                          params: {
                              CurrentPage: currentPage.value,
                              PageSize: pageSize.value
                          }
                      })
                      .then(res => {
                            tableData.value = res.data.list.itemas;
                            total.value = res.data.list.total; // 更新总记录数
                            console.log(tableData.value)
                      })
                      .catch(err => {
                          console.error("获取数据失败:", err);
                          // 可以添加错误提示
                          ElMessage.error("获取数据失败，请稍后重试");
                      });
                  }

                  // 页面大小变化时的处理函数
                  function handleSizeChange(newSize) {
                      pageSize.value = newSize;
                      currentPage.value = 1; // 重置页码为1
                      fill();
                  }

                  // 当前页码变化时的处理函数
                  function handleCurrentChange(newPage) {
                      currentPage.value = newPage;
                      fill();
                  }

                  // 修改页面跳转函数
                  function goToUpdatePage(id) {
                      window.location.href = `/EMR_SUD/Upd?id=${id}`;
                  }

              // 确认删除对话框
          const confirmDelete = (row) => {
              ElementPlus.ElMessageBox.confirm(
                  `确定要删除吗？`,
                  '删除确认',
                  {
                      confirmButtonText: '确认删除',
                      cancelButtonText: '取消',
                      type: 'warning',
                  }
              )
              .then(() => {
                  // 用户点击确认，执行删除操作
                Del(row);
              })
              .catch(() => {
                  // 用户点击取消，不执行任何操作
                  ElementPlus.ElMessage.info('已取消删除');
              });
          };

                  // 删除函数
                  function Del(id) {
                      console.log("删除记录，ID:", id);
                      axios.get(`/EMR_SUD/Delete?id=${id}`)
                      .then(res=>{
                          fill();
                          if(res.data.zhi=="ok"){
                               ElementPlus.ElMessage.success('删除成功');
                          }
                      })
                        
                  }

                  // 初始加载数据
                  onMounted(() => {
                      fill();
                  });

                  return {
                      tableData,
                      pageSize,
                      currentPage,
                      total,
                      goToUpdatePage,
                      Del,
                      handleSizeChange,
                      handleCurrentChange,
                      confirmDelete
                  }
              }
            });

            app.use(ElementPlus);
            app.mount('#app');
        </script>
    </body>
    </html>
